<template>
  <div class="rot" >
    <searchHeader/>
    <div class="searchNav">
      <tab class="ctop" active-color="#fc378c" v-model="index">
        <tab-item
          class="vux-center"
          :selected="demo2 === item"
          v-for="(item, index) in list"
          @click="demo2 "
          :key="index"
        >{{item}}</tab-item>
      </tab>
      <swiper class="nu" v-model="index" height="800vw"  :show-dots="false">
        <swiper-item class="cNav" v-for="(item, index) in list" :key="index">
          <div v-if="index==0" class="tab-swiper vux-center">
            <recommend/>
          </div>
          <div v-if="index==1" class="tab-swiper vux-center">
            <emotion/>
          </div>
          <div v-if="index==2" class="tab-swiper vux-center">
            <soup/>
          </div>
          <div v-if="index==3" class="tab-swiper vux-center">
            <original/>
          </div>
          <div v-if="index==4" class="tab-swiper vux-center">
            <ecn/>
          </div>
          <div v-if="index==5" class="tab-swiper vux-center">
            <topic/>
          </div>
           <div v-if="index==6" class="tab-swiper vux-center">
            <square/>
          </div>
          <div v-if="index==7" class="tab-swiper vux-center">
            <essay/>
          </div>
          <div v-if="index==8" class="tab-swiper vux-center">
            <eng/>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>
<script>
import searchHeader from "../components/search/searchHeader";
import recommend from "../components/search/recommend";
import topic from "../components/search/topic";
import original from "../components/search/original";
import square from "../components/search/square";
import emotion from "../components/search/emotion";
import ecn from "../components/search/ecn";
import essay from "../components/search/essay";
import soup from "../components/search/soup";
import eng from "../components/search/eng";

import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from "vux";
const list = () => ["推荐", "情感", "毒汤", "原创", "励志",'话题',"广场","随笔","英文"];

export default {
  data: function() {
    return {
      list: list(),
      demo2: "",
      index: 0
    };
  },
  components: {
    ecn,
    eng,
    emotion,
    essay,
    soup,
    square,
    original,
    topic,
    searchHeader,
    recommend,
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  mounted() {
    // this.getSerchInfo()
  },
  methods: {
    //   demo2:function(){
    //       console.log(123)
    //   }
  }
};
</script>
<style scoped>
.nu{
  /* border: 1px solid red; */
  overflow-y: auto;
  /* background-color: aliceblue; */
}
.rot {
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.searchNav{
  /* border: 1px solid black; */
  margin-top: 10vw;
}
.ctop{
  position: fixed;
  background-color: white;
  width: 100vw;
  z-index: 900;
}
.cNav{
  margin-top: 12vw;
  
}

</style>